<template>
  <div class="chart-container">
    <div class="title-container">
      <h2>课程数据统计</h2>
    </div>
    <div class="table-container">
      <el-table :data="courseList" style="width: 100%">
        <el-table-column prop="courseName" label="课程名称"></el-table-column>
        <el-table-column prop="likeNum" label="点赞"></el-table-column>
        <el-table-column prop="collectNum" label="收藏"></el-table-column>
        <el-table-column prop="shareNum" label="浏览量"></el-table-column>
      </el-table>
    </div>
    <el-row :gutter="20" class="chart-row">
      <el-col :span="4">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>课程分类</span>
          </div>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            class="tree"
          ></el-tree>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>课程数据统计图</span>
          </div>
          <div ref="chart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>import * as echarts from 'echarts';
import { listCourse, courseCategoryTree } from "@/api/siyun/course";

export default {
  name: "FavoriteChart",
  data() {
    return {
      chartInstance: null,
      courseList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        classify: null, // 用于存储选中的节点ID
      },
      chartData: {
        categories: ['点赞', '收藏', '浏览量'],
        values: [
          { name: '课程收藏量', type: 'bar', yAxisIndex: 0, data: [] } // 初始化为空数组
        ]
      },
      treeData: [], // 存储树形数据
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  mounted() {
    this.getCourseCategoryTree(); // 获取树形数据
  },
  created() {
    this.getList();
  },
  methods: {
    async getCourseCategoryTree() {
      try {
        const response = await courseCategoryTree();
        this.treeData = response.data;
      } catch (error) {
        console.error('获取课程分类树失败', error);
      }
    },
    handleNodeClick(data) {
      this.queryParams.classify = data.id; // 将选中的节点ID赋值给queryParams
      this.getList(); // 调用getList方法进行查询
    },
    async getList() {
      try {
        const response = await listCourse(this.queryParams);
        console.log(response);
        this.courseList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.updateChartData(); // 更新柱状图数据
      } catch (error) {
        console.error('获取课程数据失败:', error);
      }
    },
    updateChartData() {
      if (this.courseList.length > 0) {
        // 计算每一列的总和
        const likeNumTotal = this.courseList.reduce((acc, item) => acc + item.likeNum, 0);
        const collectNumTotal = this.courseList.reduce((acc, item) => acc + item.collectNum, 0);
        const shareNumTotal = this.courseList.reduce((acc, item) => acc + item.shareNum, 0);

        this.chartData.values[0].data = [likeNumTotal, collectNumTotal, shareNumTotal];
        this.initChart();
      } else {
        this.chartData.values[0].data = [];
        this.initChart();
        console.error('响应数据为空或格式不正确');
      }
    },
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: this.chartData.categories
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '课程收藏量',
            min: 0,
            max: 200, // 根据实际数据调整
            position: 'left',
            axisLabel: {
              formatter: '{value} 次'
            }
          }
        ],
        series: this.chartData.values
      };
      this.chartInstance.setOption(option);
    }
  }
};
</script>

<style scoped>
.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px;
}

.title-container {
  text-align: left;
  width: 100%;
}

.table-container {
  width: 100%;
}

.chart-row {
  margin-top: 20px;
  width: 100%;
}

.box-card {
  width: 100%;
}

.tree {
  margin-top: 10px;
}

.chart {
  width: 100%;
  height: 450px;
}

.el-table {
  margin-top: 20px;
}

.el-table th {
  background-color: #f2f2f2;
}

.el-table th, .el-table td {
  padding: 10px;
  border: 1px solid #ddd;
}

.el-table th.is-leaf {
  border-bottom: 1px solid #ddd;
}

.el-table::before {
  height: 0;
}
</style>
